<template>

  <div>{{ a }}</div>
  <button @click="reset">修改</button>
  <div>
    {{ form }}
  </div>
  <!-- computed -->
  <div>
    {{ m }}
  </div>
  <button @click="resetNum">修改依赖</button>
  
</template>

<script setup lang='ts'>
import {toRef,reactive,toRaw,computed, ref,} from 'vue'
//toRef（）接受一个对象和对象的某个属性  toRefs接受整个对象  toRaw将响应式对象转为不响应对象
let a = reactive({like:1});
let b = toRef(a,'like');
const reset = ()=>{
     b.value = 123;
}

const form = reactive<{
    name:string,
    age:number,
    height:number
}>({
    name:'柳俊',
    age:23,
    height:188
})


let num = ref(22)

let m  = computed(()=>{
  return '$'+num.value
})
const emit = defineEmits(['on-click'])
const resetNum= ()=>{
  console.log('123');
  emit('on-click',num)
}
</script>
<style scoped>

</style>